<template>
  <div class="refine_oilspillpower">
    <h2 class="titleblue">溢油力量</h2>
    <div class="contant">
      <div class="plan-operate">
        <div @click="addShips" class="fl create" v-show="sysShow">新增溢油应急船舶</div>
        <div @click="addAircraft" class="fl create" v-show="syShow">新增溢油应急库</div>
        <div class="fr" v-if="plantabs=='first'">
          <label>船舶种类</label>
          <el-select clearable v-model="shipType" class="select-width-200" @change="shipChange">
            <el-option v-for="item in shipOptions" :key="item.value" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="fr" v-if="plantabs=='second'">
          <label>设备库类型</label>
          <el-select clearable v-model="emeType" class="select-width-200" @change="emeChange">
            <el-option v-for="item in emeOptions" :key="item.value" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <el-tabs v-model="plantabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="溢油应急船舶" name="first">
          <data-table :page='currentPage' :head="thead1" :data="tableData1" :actions="['edit','view','del']"
                      @callback="manipulate"></data-table>
        </el-tab-pane>
        <el-tab-pane label="溢油应急库" name="second">
          <data-table :page='currentPage1' :head="thead2" :data="tableData2" :actions="['edit','view','del']"
                      @callback="manipulate2"></data-table>
        </el-tab-pane>
      </el-tabs>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     layout="total,prev, pager, next, jumper" :total="totalPage1" background
                     v-if="plantabs=='first'"></el-pagination>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1"
                     :current-page.sync="currentPage1"
                     layout="total,prev, pager, next, jumper" :total="totalPage2" background
                     v-if="plantabs=='second'"></el-pagination>
    </div>

    <el-dialog title="" :visible.sync="adddialog" width="80%" append-to-body @close="close1" @open='asd=true'>
        <span>
            <router-view :navOptions="navOptions" :emeOptions="emeOptions" :shipOptions="shipOptions" :id="ddid"
                         :detail="detail" @close="close"
                         @update="update" v-if="asd"></router-view>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import dictService from '@/services/DictionaryService.js'
  import emmerShipService from '@/services/EmmerShipService.js'
  import emWarehouseService from '@/services/EmWarehouseService.js'

  import moment from 'moment'

  export default {
    name: 'SpillOilPower',
    components: {
      'data-table': DataTable
    },
    watch: {
      lat (old, newVal) {
      }
    },
    data: function () {
      return {
        shipType: '',
        emeType: '',
        powerType: '',
        shipOptions: [],
        navOptions: [],
        emeOptions: [],
        plantabs: 'first',
        thead1: [
          {
            name: '中文船名',
            prop: 'cnName'
          },
          {
            name: '船舶种类',
            prop: 'category'
          },
          {
            name: '总吨(GT)',
            prop: 'grossTonnage'
          },
          {
            name: '航区',
            prop: 'navZone'
          },
          {
            name: '船舶类型',
            prop: 'typeName'
          },
          {
            name: '单位名称',
            prop: 'unitName'
          },
          {
            name: '所属辖区',
            prop: 'belongArea'
          },
          {
            name: '停靠区域',
            prop: 'parkedArea'
          },

        ],
        thead2: [
          {
            name: '设备库',
            prop: 'libraryName'
          },
          {
            name: '设备库类型',
            prop: 'category'
          },
          {
            name: '生产厂家',
            prop: 'manufacturer'
          },
          {
            name: '购置年份',
            prop: 'purchaseYear'
          },
          {
            name: '存放地所属辖区',
            prop: 'storageArea'
          },
          {
            name: '所属单位',
            prop: 'department'
          },
          {
            name: '存放地点',
            prop: 'storageLocation'
          },

        ],
        tableData1: [],
        tableData2: [],
        currentPage: 1,
        currentPage1: 1,
        adddialog: false,
        totalPage1: 1,
        totalPage2: 1,
        counts: 10,
        page: 1,
        ddid: '',
        id: '',
        detail: '',
        asd: true,
        sjhq: [],
        sysShow: true,
        syShow: true,

      }
    },
    async created () {
      await this.getSelect()
      this.getData(0)
    },
    methods: {
      async getSelect () {
        if (this.shipOptions.length == 0) {
          await dictService.find('YJCBLX').then(res => {
            this.shipOptions = res
          })
        }
        if (this.navOptions.length == 0) {
          await dictService.find('HQ').then(res => {
            this.navOptions = res
          })
        }
        if (this.emeOptions.length == 0) {
          await dictService.find('YJKLX').then(res => {
            this.emeOptions = res
          })
        }
      },
      getData (num, query) {
        if (this.plantabs == 'first') {
          emmerShipService.search(num, query).then(res => {
            this.totalPage1 = res.dataCount
            let arr = res.data.map(item => {
              if (item.category) {
                this.shipOptions.forEach(val => {
                  if (val.id == item.category) {
                    item.category = val.name
                  }
                })
              }
              if(item.navZone){
                this.navOptions.forEach(val => {
                  if (val.id == item.navZone) {
                    item.navZone = val.name
                  }
                })
              }
              return item
            })
            // this.currentPage = res.dataCount
            this.tableData1 = arr
          })
        } else if (this.plantabs == 'second') {
          emWarehouseService.search(num, query).then(res => {
            this.totalPage2 = res.dataCount
            let arr = res.data.map(item => {
              if (item.category) {
                this.emeOptions.forEach(val => {
                  if (val.id == item.category) {
                    item.category = val.name
                  }
                })
              }
              return item
            })
            this.tableData2 = arr
          })
        }
      },
      addShips () {
        this.adddialog = true
        this.$router.push('/spill-oil-power/create-ship')
        this.ddid = ''
        this.detail = 'create'
      },
      addAircraft () {
        this.adddialog = true
        this.$router.push('/spill-oil-power/create-warehouse')
        this.ddid = ''
        this.detail = 'create'
      },
      manipulate (param) {
        if (param.action == 'edit') {
          this.adddialog = true
          this.$router.push({name: 'CreateShip', params: param})
          // this.ddid = this.tableData1[doing[1]].d_id
          this.detail = 'edit'
        }
        if (param.action == 'view') {
          this.adddialog = true
          this.$router.push({name: 'CreateShip', params: param})
          // this.ddid = this.tableData1[doing[1]].d_id
          this.detail = 'look'
        }
        if (param.action == 'del') {
          emmerShipService.delete(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      manipulate2 (param) {
        if (param.action == 'edit') {
          this.adddialog = true
          this.$router.push({name: 'CreateWarehouse', params: param})
          // this.ddid = this.tableData1[doing[1]].d_id
          this.detail = 'edit'
        }
        if (param.action == 'view') {
          this.adddialog = true
          this.$router.push({name: 'CreateWarehouse', params: param})
          // this.ddid = this.tableData1[doing[1]].d_id
          this.detail = 'look'
        }
        if (param.action == 'del') {
          emWarehouseService.delete(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      handleClick () {
        this.getData(0);
      },
      handleSizeChange (val) {
        this.reGetData(val - 1)
      },
      handleCurrentChange (val) {
        this.currentPage = val
        this.reGetData(val - 1)

      },
      handleCurrentChange1 (val) {
        this.currentPage1 = val
        this.reGetData(val - 1)

      },
      close () {
        this.adddialog = false
        this.asd = false
        this.$router.push('/spill-oil-power')
        this.getData(0)
      },
      close1 () {
        this.adddialog = false
        this.$router.push('/spill-oil-power')
      },
      update () {
        this.adddialog = false
        this.currentPage = 1
        this.currentPage1 = 1
        this.getData()
      },
      handleQuery (param) {
        var query = ''
        if (param.shipType) {
          query += 'category==' + param.shipType
        } else if (param.emeType) {
          query += 'category==' + param.emeType
        }
        return query
      },
      async shipChange () {
        this.currentPage = 1
        let param = {
          shipType: this.shipType
        }
        let query = await this.handleQuery(param)
        this.getData(0, query)
      },
      async emeChange () {
        this.currentPage1 = 1
        let param = {
          emeType: this.emeType
        }
        let query = await this.handleQuery(param)
        this.getData(0, query)
      },
      reGetData: function (val) {
        if (this.shipType) {
          this.getData(val, this.shipType)
        } else if (this.eme_type) {
          this.getData(val, this.eme_type)
        } else {
          this.getData(val, '')
        }

      },
    }
  }
</script>

<style scoped lang="scss">
  .refine_oilspillpower {
    width: 100%;
    display: inline-block;
    padding-bottom: 50px;

    .el-table tr:nth-child(2n) {
      background: #FAFAFA
    }

    .el-table__body,
    .el-table__footer,
    .el-table__header {
      width: 100% !important;
    }
  }
</style>
